<template>
	<view class="more-page">
		<view class="more-page-title">
			<view class="more-page-title-main">
				<t-icon name="chevron-left" size="26" @click="onBack" />
				<view class="more-page-title-main-center">
					<text class="more-page-title-main-center-main">{{ currItem.qqdx }}支撑群</text>
					<!-- <text class="more-page-title-main-center-sub">{{ currTabbar }}</text> -->
				</view>
			</view>
		</view>
		<view class="more-page-content">
			<ChartInfo v-show="currTabbar == '基本信息'" :currItem="currItem" />
			<ChartLog v-show="currTabbar == '操作日志'" :currItem="currItem" />
			<PersonList v-show="currTabbar == '人员列表'" :currItem="currItem" />
			<PersonSelect v-show="currTabbar == '人员邀请'" :currItem="currItem" />
		</view>
		<t-tab-bar  v-model="currTabbar" shape="round" theme="tag" :split="false">
			<t-tab-bar-item v-for="item in tabbarList" :key="item.value" :value="item.value">
				<template #icon>
					<t-icon :name="item.icon" />
				</template>
			</t-tab-bar-item>
		</t-tab-bar>
	</view>
</template>

<script setup>
	import ChartInfo from "@/components/ChartInfo"
	import ChartLog from "@/components/ChartLog"
	import PersonList from "@/components/PersonList"
	import PersonSelect from "@/components/PersonSelect"
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from "vue"
	
	onLoad(async options => {
		if (!options.qqId) {
			Message['error']({ offset: [10, 16], content: '缺失请求id', icon: true });
			return;
		}
		await updateCurrItem(options.qqId);
	});
	
	const currItem = ref({});
	const tabbarList = [
		{ value: '基本信息', icon: 'home' },
		{ value: '操作日志', icon: 'catalog' },
		{ value: '人员列表', icon: 'user-list' },
		{ value: '人员邀请', icon: 'user-add' },
	]
	// const tabbarList = ['基本信息', '操作日志', '人员列表', '人员邀请'].map(label => ({ label, value: label }));
	const currTabbar = ref('基本信息');
	
	const updateCurrItem = qqId => {
		return new Promise(resolve => {
			currItem.value = {
				id: qqId,
				ltsbh: 'chart1',
				ztzt: 4,
				ztnr: '一标三实',
				qqdx: '基础管控中心',
				cjrmc: '熊倡',
				cjrjh: '302871',
				zzmc: '科信科',
				cjrlxdh: '17358486814',
				qqsj: '2025-03-10 10:07:01',
				jjcd: '系统',
				nrms: '一标三实数据不一致，请仔细核查。一标三实数据不一致，请仔细核查。一标三实数据不一致，请仔细核查。一标三实数据不一致，请仔细核查。'
			}
			resolve();
		})
	}
	
	const onTabbarChange = value => {
		currTabbar.value = value;
	}
	
	const onBack = () => {
		uni.navigateBack();
	}
</script>

<style lang="scss" scope>
	.more-page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #fafbff;
		
		&-title {
			padding: 12px;
			background-color: #fff;
			border-bottom-left-radius: 12px;
			border-bottom-right-radius: 12px;
			box-shadow: 0px 6px 12px 0px rgba(#2A7AFF, 5%);
			
			&-main {
				height: 46px;
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// margin-bottom: 12px;
				
				&-center {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					display: flex;
					flex-direction: column;
					justify-content: center;
					row-gap: 4px;
					
					&-main {
						font-weight: 500;
						font-size: 18px;
						text-align: center;
					}
					
					&-sub {
						font-size: 14px;
						color: #666666;
						text-align: center;
					}
				}
			}
			
			:deep(.t-tabs) {
				background: transparent;
			}
			:deep(.t-tabs__wrapper) {
				background: transparent;
			}
			:deep(.t-tabs__scroll) {
				height: 40px;
			}
			:deep(.t-tabs__item--top) {
				height: 40px;
			}
			:deep(.t-tabs__content) {
				position: fixed;
				left: 0;
				top: 115px;
				width: 100%;
				height: calc(100% - 115px);
				padding: 12px;
				padding-top: 0;
			}
			:deep(.t-tab-panel) {
				width: 100%;
				height: 100%;
				overflow: auto;
				background: #fff;
				border-radius: 12px;
				padding: 12px;
				box-shadow: 0px 0px 12px 0px rgba(#2A7AFF, 5%);
			}
		}
		
		&-content {
			flex: 1;
			padding: 12px;
			overflow: auto;
			padding-bottom: calc(env(safe-area-inset-bottom) + 14px + (var(--td-tab-bar-height, 40px) + 16px) + 12px);
		}
		
		:deep(.t-tab-bar--fixed.t-tab-bar--round.t-tab-bar--safe) {
			bottom: calc(env(safe-area-inset-bottom) + 14px);
		}
	}
</style>